<template>
    <div class="additionalLoanDiscount">
        <!-- 无贴息-->
        <div v-if="discountOption==0" class="mt10">
            <Row>
                <Col offset="1">
                    <div class="commonModel">
                        <span>客户利率:</span>
                        <div class="newele">
                            <Input v-model="noDiscountSuppleLoan.newValue.custRate" style="width:80px" placeholder=""
                                   :readonly="readonly"/>
                            <span>%</span>
                        </div>
                        <div class="oldele">
                            <b>{{noDiscountSuppleLoan.oldValue.custRate}}</b> <span>%</span>
                        </div>
                    </div>
                </Col>
            </Row>
            <Row>
                <Col offset="1">
                    <div class="commonModel">
                        <span>首期月供:</span>
                        <div class="newele">
                            <Input v-model="noDiscountSuppleLoan.newValue.monthPay" style="width:80px" placeholder=""
                                   :readonly="readonly"/>
                            <span>%</span>
                        </div>
                        <div class="oldele">
                            <b>{{noDiscountSuppleLoan.oldValue.monthPay}}</b><span>元</span>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
        <!-- 灵活贴息 -->
        <div v-if="discountOption==2" class="mt10">
            <div>
                <common-loan :formData="flexSuppleLoanForm"></common-loan>
            </div>
        </div>
        <!-- 非灵活贴息 -->
        <div v-if="discountOption==1" class="mt10">
            <Row>
                <Col offset="1">
                    <div class="commonModel">
                        <span>客户利率 : </span>
                        <div class="newele">
                            <Input v-model="noflexSuppleLoan.newValue.custRate" style="width:80px" placeholder=""
                                   :readonly="readonly"/>
                            <span>%</span>
                        </div>
                        <div class="oldele">
                            <span>{{noflexSuppleLoan.oldValue.custRate}}</span><b>%</b>
                        </div>
                    </div>
                </Col>
            </Row>
            <Row>
                <Col offset="1">
                    <div class="commonModel">
                        <span>月供 : </span>
                        <div class="newele">
                            <Input v-model="noflexSuppleLoan.monthPayAmt.newValue" style="width:80px" placeholder=""
                                   :readonly="readonly"/>
                            <span>元</span>
                        </div>
                        <div class="oldele">
                            <span>{{noflexSuppleLoan.monthPayAmt.oldValue}}</span><b>元</b>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
    </div>
</template>
<script>
    import CommonLoan from "../common-loan/commonLoan.vue"
    import * as utils from '_p/afs-apply/assets/js/utils.js'

    export default {
        name: "additionalLoanDiscount",
        data() {
            return {
                readonly: true,
                // 无贴息
                noDiscountSuppleLoan: {
                    oldValue: {},
                    newValue: {}
                },
                flexSuppleLoanForm: {
                    maxDisCountAm: "",
                    oldValue: {},
                    newValue: {},
                    loadList: [],
                },
                noflexSuppleLoan: {
                    oldValue: {},
                    newValue: {}
                },

            }
        },
        components: {
            CommonLoan
        },
        props: {
            discountOption: {
                type: String,
            },
            addCostDetails: {
                type: Object,
            },
            discountList:{
                type:Array
            }
        },
        created() {
            console.log("金融产品页面-附加贷信息部分")
        },
        watch: {
            addCostDetails(val) {
                if (Object.keys(val).length > 0) {
                    this.queryLoanInfo(val);
                }
            }
        },
        mounted() {
        },
        computed: {},
        methods: {
            queryLoanInfo(val) {
                // 无贴息
                let {newAddValue} = val;
                let {oldAddValue} = val;
                if (val.discountOption == 0) {
                    this.noDiscountSuppleLoan.oldValue = oldAddValue;
                    this.noDiscountSuppleLoan.newValue = newAddValue
                } else if (val.discountOption == 1) {
                    this.noflexSuppleLoan.oldValue = oldAddValue;
                    this.noflexSuppleLoan.newValue = vnewAddValue;
                } else if (val.discountOption == 2) {
                    this.flexSuppleLoanForm.oldValue = oldAddValue;
                    this.flexSuppleLoanForm.newValue = newAddValue;
                    this.flexSuppleLoanForm.loadList = this.queryDiscount(val.discountList);
                }
            },
            queryDiscount(discountList) {
                let discountParty=utils.setDataDictVal(this.discountList,item.discountId)
                let tempDiscout = [];
                discountList.forEach((item, index) => {
                    obj = {
                        discountParty:discountParty,
                        discountAmt: item.discountAmt,
                    }
                    tempDiscout.push(obj);
                })
                return tempDiscout;
            },

        }
    }
</script>

<style scoped>
    .commonModel > div {
        display: inline-block;
    }

    .commonModel > div {
        position: relative;
    }

    .commonModel > div.newele {
        margin-bottom: 10px;
    }

    .commonModel > div.newele > span {
        position: absolute;
        margin-left: -16px;
        line-height: 24px;
    }

    .commonModel > div.oldele {
        margin-left: 10px;
    }

    .commonModel > div.oldele b {
        font-weight: normal;
    }
</style>
